{% extends "layout/home_base.html" %} {% block home_content %}
<div style= "display: none"  class="dialog__body--set-domain-expiring" id="set-domain-expiring-dialog" >
    <div class="row">
        <div class="columns">
            <h1>{{ _("Expiring Domain") }}</h1>
        </div>
    </div>
    <div class="row">
        <div class="medium-6 columns">
            <label>
                {{ _("Domain ID") }}
                <div class="textbox-container">
                    <input name="domainId" type="text" class="textbox" autocomplete="off" data-autofocus />
                </div>
            </label>
        </div>
        <div class="medium-6 columns">
            <label>
                {{ _("expiring months") }}
                <div class="textbox-container">
                    <input name="expiring" type="text" class="textbox" />
                </div>
            </label>
        </div>
    </div>
</div>

<div class="section">
  <div class="section__header">
    <h1 class="section__title">{{ _('My Domains') }}</h1>
    <div class="section__tools">
      {% if handler.user.hasPriv(model.builtin.PRIV.PRIV_CREATE_DOMAIN) %}
      <a class="primary rounded button" href="{{ url('home_domain_create') }}"
        ><span class="icon icon-add"></span> {{ _('Create Domain') }}(学校)</a
      >
      {% endif %} 
      <a class="tool-button" href="{{ url('wiki_help', anchor='domain') }}"
        ><span class="icon icon-help"></span> {{ _("What's domain?") }}</a
      >
      <button class="primary rounded button nojs--hide" id="set-domain-expiring-button"><span class="icon icon-calendar"></span> {{ _('Expiring Domain') }}</button>
    </div>
  </div>
  <div class="section__body no-padding">
    <table class="data-table">
      <colgroup>
        <col class="col--icon" />
        <col class="col--name" />
        <col class="col--role" />
        <col class="col--expiring" />
        <col class="col--action" />
      </colgroup>
      <thead>
        <tr>
          <th class="col--icon">&nbsp;</th>
          <th class="col--name">{{ _('Name') }} ({{ _('ID') }})</th>
          <th class="col--role">{{ _('My Role') }}</th>
          <th class="col--expiring">{{ _('Expiring') }}</th>
          <th class="col--action">{{ _('Action') }}</th>
        </tr>
      </thead>
      <tbody>
        {%- for ddoc in ddocs -%}
        <tr>
          <td class="col--icon">
            <img
              src="{{ avatarUrl(ddoc.avatar, 32) }}"
              width="32"
              height="32"
            />
          </td>
          {% set _star = handler.user.pinnedDomains.includes(ddoc._id) %}
          <td
            class="col--name"
            data-star-action="?id={{ ddoc['_id'] }}"
            data-star="{{ _star }}"
          >
            {{ ddoc['name'] }} ({{ ddoc['_id'] }})
          </td>
          <td class="col--role">{{ role[ddoc._id]|default('default') }}</td>
          <td class="col--expiring">{{ datetimeSpan(ddoc['expiring'])|safe }}</td>
          <td class="col--action">
            <form class="form--inline" method="post">
              <input type="hidden" name="operation" value="renew" />
              <input type="hidden" name="id" value="{{ ddoc['_id'] }}" />
              <button class="typo-a" type="submit">{{ _('renew') }}</button>
            </form> ·
            <a class="typo-a" href="{{ url('homepage', domainId=ddoc['_id']) }}"
              >{{ _('Visit') }}</a
            >
            {% if canManage[ddoc['_id']] %} ·
            <a
              class="typo-a"
              href="{{ url('domain_dashboard', domainId=ddoc['_id']) }}"
              >{{ _('Manage') }}</a
            >
            {% endif %} {% if ddoc['_id'] != 'system' and ddoc['owner'] !=
            handler.user._id %} ·
            <form class="form--inline" method="post">
              <input type="hidden" name="operation" value="leave" />
              <input type="hidden" name="id" value="{{ ddoc['_id'] }}" />
              <button class="typo-a" type="submit">{{ _('Leave') }}</button>
            </form>
            {% endif %}
          </td>
        </tr>
        {%- endfor -%}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
